Node / meshtastic / Meshtastic-Android / files / core / ui / src / commonMain / kotlin / org / meshtastic / core / ui / component / AdaptiveTwoPane.kt

Displaying Raw • Download

T8b949e/*

* Copyright (c) 2026 Meshtastic LLC

*

* This program is free software: you can redistribute it and/or modify

* it under the terms of the GNU General Public License as published by

* the Free Software Foundation, either version 3 of the License, or

* (at your option) any later version.

*

* This program is distributed in the hope that it will be useful,

* but WITHOUT ANY WARRANTY; without even the implied warranty of

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

* GNU General Public License for more details.

*

* You should have received a copy of the GNU General Public License

* along with this program. If not, see <https://www.gnu.org/licenses/>.

*/

Tff7b72package T7ee787org.meshtastic.core.ui.component

Tff7b72import T7ee787androidx.compose.foundation.interaction.MutableInteractionSource

Tff7b72import T7ee787androidx.compose.foundation.layout.Column

Tff7b72import T7ee787androidx.compose.foundation.layout.ColumnScope

Tff7b72import T7ee787androidx.compose.foundation.layout.fillMaxWidth

Tff7b72import T7ee787androidx.compose.foundation.layout.padding

Tff7b72import T7ee787androidx.compose.material3.Card

Tff7b72import T7ee787androidx.compose.material3.LocalMinimumInteractiveComponentSize

Tff7b72import T7ee787androidx.compose.material3.Surface

Tff7b72import T7ee787androidx.compose.material3.Text

Tff7b72import T7ee787androidx.compose.material3.VerticalDragHandle

Tff7b72import T7ee787androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi

Tff7b72import T7ee787androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2

Tff7b72import T7ee787androidx.compose.material3.adaptive.layout.AnimatedPane

Tff7b72import T7ee787androidx.compose.material3.adaptive.layout.PaneAdaptedValue

Tff7b72import T7ee787androidx.compose.material3.adaptive.layout.SupportingPaneScaffold

Tff7b72import T7ee787androidx.compose.material3.adaptive.layout.ThreePaneScaffoldValue

Tff7b72import T7ee787androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective

Tff7b72import T7ee787androidx.compose.material3.adaptive.layout.rememberPaneExpansionState

Tff7b72import T7ee787androidx.compose.runtime.Composable

Tff7b72import T7ee787androidx.compose.runtime.movableContentOf

Tff7b72import T7ee787androidx.compose.runtime.remember

Tff7b72import T7ee787androidx.compose.ui.Modifier

Tff7b72import T7ee787androidx.compose.ui.unit.dp

Tff7b72import T7ee787org.meshtastic.core.ui.theme.AppTheme

T8b949e/**

* A two-slot adaptive layout: [first] and [second] are stacked in a single column on compact/medium windows and shown

* side-by-side once the window is large enough to warrant a second pane.

*

* The split decision is delegated to [calculatePaneScaffoldDirective] rather than a hardcoded width breakpoint. The

* directive only grants a second horizontal partition at the **expanded** width class (>= 840dp) by default — matching

* the Material adaptive guidance that side-by-side panes are an expanded-width pattern, not a medium (600dp) one — and

* it is hinge / multi-window aware. This is the same primitive the app's navigation-based scaffolds

* ([MeshtasticNavDisplay]) use, so both surfaces flip to two panes at the same breakpoint.

*

* When split, the panes are hosted in a [SupportingPaneScaffold] so the divider is a draggable [VerticalDragHandle],

* giving parity with the list-detail / supporting-pane scenes elsewhere in the app. Both slots keep their [ColumnScope]

* receiver, so callers are unchanged.

*/

Tf0883e@OptInTb4b4b4(Te6edf3ExperimentalMaterial3AdaptiveApiTff7b72::Te6edf3classTb4b4b4)

Tf0883e@Composable

Tff7b72fun Td2a8ffAdaptiveTwoPaneTb4b4b4(

Te6edf3firstTb4b4b4: Tf0883e@Composable Te6edf3ColumnScopeTb4b4b4.Tb4b4b4(Tb4b4b4) Tff7b72-Tff7b72> Tffa657UnitTb4b4b4,

Te6edf3secondTb4b4b4: Tf0883e@Composable Te6edf3ColumnScopeTb4b4b4.Tb4b4b4(Tb4b4b4) Tff7b72-Tff7b72> Tffa657UnitTb4b4b4,

Te6edf3modifierTb4b4b4: Te6edf3Modifier Tff7b72= Te6edf3ModifierTb4b4b4,

Tb4b4b4) Tb4b4b4{

Tff7b72val Te6edf3directive Tff7b72= Te6edf3calculatePaneScaffoldDirectiveTb4b4b4(Te6edf3currentWindowAdaptiveInfoV2Tb4b4b4(Tb4b4b4)Tb4b4b4)

T8b949e// Wrap the slots in movable content so their internal state survives when the layout flips between the stacked

T8b949e// column and the two-pane scaffold (e.g. on resize / fold), and so neither slot is emitted directly from two

T8b949e// branches. The ColumnScope is passed through, so the compact branch keeps the shared-column behaviour.

Tff7b72val Te6edf3firstPane Tff7b72= Te6edf3remember Tb4b4b4{ Te6edf3movableContentOfTff7b72<Te6edf3ColumnScopeTff7b72>Tb4b4b4(Te6edf3firstTb4b4b4) Tb4b4b4}

Tff7b72val Te6edf3secondPane Tff7b72= Te6edf3remember Tb4b4b4{ Te6edf3movableContentOfTff7b72<Te6edf3ColumnScopeTff7b72>Tb4b4b4(Te6edf3secondTb4b4b4) Tb4b4b4}

Tff7b72if Tb4b4b4(Te6edf3directiveTb4b4b4.Te6edf3maxHorizontalPartitions Tff7b72> T79c0ff1Tb4b4b4) Tb4b4b4{

T8b949e// Expanded: canonical supporting-pane layout with a draggable divider. Both panes are forced visible because

T8b949e// we only reach this branch when the directive allows two partitions.

Te6edf3SupportingPaneScaffoldTb4b4b4(

Te6edf3modifier Tff7b72= Te6edf3modifierTb4b4b4,

Te6edf3directive Tff7b72= Te6edf3directiveTb4b4b4,

Te6edf3value Tff7b72=

Te6edf3ThreePaneScaffoldValueTb4b4b4(

Te6edf3primary Tff7b72= Te6edf3PaneAdaptedValueTb4b4b4.Te6edf3ExpandedTb4b4b4,

Te6edf3secondary Tff7b72= Te6edf3PaneAdaptedValueTb4b4b4.Te6edf3ExpandedTb4b4b4,

Te6edf3tertiary Tff7b72= Te6edf3PaneAdaptedValueTb4b4b4.Te6edf3HiddenTb4b4b4,

Tb4b4b4)Tb4b4b4,

Te6edf3mainPane Tff7b72= Tb4b4b4{ Te6edf3AnimatedPane Tb4b4b4{ Te6edf3Column Tb4b4b4{ Te6edf3firstPaneTb4b4b4(Tff7b72thisTb4b4b4) Tb4b4b4} Tb4b4b4} Tb4b4b4}Tb4b4b4,

Te6edf3supportingPane Tff7b72= Tb4b4b4{ Te6edf3AnimatedPane Tb4b4b4{ Te6edf3Column Tb4b4b4{ Te6edf3secondPaneTb4b4b4(Tff7b72thisTb4b4b4) Tb4b4b4} Tb4b4b4} Tb4b4b4}Tb4b4b4,

Te6edf3paneExpansionState Tff7b72= Te6edf3rememberPaneExpansionStateTb4b4b4(Tb4b4b4)Tb4b4b4,

Te6edf3paneExpansionDragHandle Tff7b72= Tb4b4b4{ Te6edf3state Tff7b72-Tff7b72>

Tff7b72val Te6edf3interactionSource Tff7b72= Te6edf3remember Tb4b4b4{ Te6edf3MutableInteractionSourceTb4b4b4(Tb4b4b4) Tb4b4b4}

Te6edf3VerticalDragHandleTb4b4b4(

Te6edf3modifier Tff7b72=

Te6edf3ModifierTb4b4b4.Te6edf3paneExpansionDraggableTb4b4b4(

Te6edf3state Tff7b72= Te6edf3stateTb4b4b4,

Te6edf3minTouchTargetSize Tff7b72= Te6edf3LocalMinimumInteractiveComponentSizeTb4b4b4.Te6edf3currentTb4b4b4,

Te6edf3interactionSource Tff7b72= Te6edf3interactionSourceTb4b4b4,

Tb4b4b4)Tb4b4b4,

Te6edf3interactionSource Tff7b72= Te6edf3interactionSourceTb4b4b4,

Tb4b4b4)

Tb4b4b4}Tb4b4b4,

Tb4b4b4)

Tb4b4b4} Tff7b72else Tb4b4b4{

T8b949e// Compact / medium: keep both slots stacked in a single column (the supporting content must stay visible on

T8b949e// phones — this is not a navigable list-detail flow).

Te6edf3ColumnTb4b4b4(Te6edf3modifier Tff7b72= Te6edf3modifierTb4b4b4) Tb4b4b4{

Te6edf3firstPaneTb4b4b4(Tff7b72thisTb4b4b4)

Te6edf3secondPaneTb4b4b4(Tff7b72thisTb4b4b4)

Tb4b4b4}

Tb4b4b4}

Tb4b4b4}

T8b949e/** Screenshot-test sample; public so `:screenshot-tests` can render it at compact, medium, and expanded widths. */

Tf0883e@SuppressTb4b4b4(Ta5d6ff"Ta5d6ffMagicNumberTa5d6ff"Tb4b4b4)

Tf0883e@Composable

Tff7b72fun Td2a8ffAdaptiveTwoPaneSampleTb4b4b4(Te6edf3modifierTb4b4b4: Te6edf3Modifier Tff7b72= Te6edf3ModifierTb4b4b4) Tb4b4b4{

Te6edf3AppTheme Tb4b4b4{

Te6edf3SurfaceTb4b4b4(Te6edf3modifier Tff7b72= Te6edf3modifierTb4b4b4) Tb4b4b4{

Te6edf3AdaptiveTwoPaneTb4b4b4(

Te6edf3first Tff7b72= Tb4b4b4{

Te6edf3CardTb4b4b4(Te6edf3modifier Tff7b72= Te6edf3ModifierTb4b4b4.Te6edf3fillMaxWidthTb4b4b4(Tb4b4b4)Tb4b4b4.Te6edf3paddingTb4b4b4(T79c0ff8.Te6edf3dpTb4b4b4)Tb4b4b4) Tb4b4b4{

Te6edf3TextTb4b4b4(Te6edf3text Tff7b72= Ta5d6ff"Ta5d6ffPrimary paneTa5d6ff"Tb4b4b4, Te6edf3modifier Tff7b72= Te6edf3ModifierTb4b4b4.Te6edf3paddingTb4b4b4(T79c0ff2T79c0ff4.Te6edf3dpTb4b4b4)Tb4b4b4)

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Te6edf3second Tff7b72= Tb4b4b4{

Te6edf3CardTb4b4b4(Te6edf3modifier Tff7b72= Te6edf3ModifierTb4b4b4.Te6edf3fillMaxWidthTb4b4b4(Tb4b4b4)Tb4b4b4.Te6edf3paddingTb4b4b4(T79c0ff8.Te6edf3dpTb4b4b4)Tb4b4b4) Tb4b4b4{

Te6edf3TextTb4b4b4(Te6edf3text Tff7b72= Ta5d6ff"Ta5d6ffSupporting paneTa5d6ff"Tb4b4b4, Te6edf3modifier Tff7b72= Te6edf3ModifierTb4b4b4.Te6edf3paddingTb4b4b4(T79c0ff2T79c0ff4.Te6edf3dpTb4b4b4)Tb4b4b4)

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tb4b4b4)

Tb4b4b4}

Tb4b4b4}

Tb4b4b4}